<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 有哪些新特性？（根据项目回答）</title>
<style type="text/css">
.a1{
	position: relative;
	width: 500px;
	height: 500px;
	background: linear-gradient(#fa0 50%,#0fa 50%);
	background-size: 100% 30px;
}
.a2{
	left: 20px;
	top: 20px;
	width: 600px;
	height: 400px;
	position: absolute;
	background: linear-gradient(45deg, 
			#fb3 25%, #58a 0, #58a 50%,
			#fb3 0, #fb3 75%, #58a 0);
	background-size: 42.4px 42.4px;
}
.a3{
	top: 20px;
	left: 20px;
	width: 300px;
	height: 300px;
	position: absolute;
	background: #fff000 url(images/err.png) no-repeat right bottom;
	background-position: calc(100% - 20px) calc(100% - 10px);
}

.a4{
	width: 300px;
	height: 300px;
	background: repeating-linear-gradient(60deg, 
			  #fb3, #fb3 15px,
			  #58a 0, #58a 30px);
}

.a5{
	width: 300px;
	height: 300px;
	background-color: #8b0;
	background-image:	linear-gradient(white 2px,transparent 0),
						linear-gradient(90deg,white 2px,transparent 0),
						linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
						linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
	background-size: 50px 50px,50px 50px,10px 10px,10px 10px;
}

.a6{
	width: 300px;
	height: 300px;
	background-color: #655;
	background-image: radial-gradient(tan 20%,transparent 0),
						radial-gradient(tan 20%,transparent 0);
	background-size: 30px 30px;
	background-position: 0 0,15px 15px;
}
.a7{

	width: 300px;
	height: 300px;
	background-image:
	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
	background-position: 0 0,15px 15px;
	background-size: 30px 30px;
	
}

.a8{
	/* 关键样式 */
	background: hsl(20, 40%, 90%);
	background-image: 
		linear-gradient(90deg, #fb3 11px, transparent 0),
		linear-gradient(90deg, #ab4 23px, transparent 0),
		linear-gradient(90deg, #655 23px, transparent 0);
	background-size: 83px 100%, 61px 100%, 41px 100%;
	
	/* 其它样式 */
	width: 300px;
	height: 200px;
}
</style>
</head>
<body>
<pre>
新增各种CSS选择器	（:not(.input)：所有class不是“input”的节点）
圆角		（border-radius:8px）
多列布局	（multi-column layout）
阴影和反射	（Shadow\Reflect）
文字特效		（text-shadow）
文字渲染		（Text-decoration）
线性渐变		（gradient）
旋转			（transform）
缩放，定位，倾斜，动画，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:
</pre>



<div class="a1">
	<div class="a2">
		<div class="a3"></div>
	</div>
</div>

<div class="a4"></div>

<div class="a5"></div>

<div class="a6"></div>

<div class="a7"></div>

<div class="a8"></div>

<script type="text/javascript">

</script>
</body>
</html>
